/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Divider, Modal, Table } from 'antd';
import Wrapper from './wrapper';
import * as actions from '../../actions/articleAction';
import style from './style.css';

const confirm = Modal.confirm;

@connect((state) => ({
  article: state.admin.article,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
    this.delConfirm = this.delConfirm.bind(this);
  }

  componentDidMount() {
    this.props.getAllArticle();
  }

  delConfirm(id) {
    const { del } = this.props;
    confirm({
      title: '确定删除此文章?',
      content: '删除后不可恢复',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        del(id);
      },
      onCancel() {
      },
    });
  }

  render() {
    const { list } = this.props.article;
    const columns = [
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
      }, {
        title: '类别',
        dataIndex: 'cname',
        key: 'cname',
      }, {
        title: '添加时间',
        dataIndex: 'create_time',
        key: 'create_time',
      }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a href={`/#/admin/article/edit?id=${record.id}`}>编辑</a>
            <Divider type="vertical" />
            <a onClick={() => this.delConfirm(record.id)}>删除</a>
          </span>
        ),
      }
    ];
    return (
      <Wrapper openKeys="article" selectedKeys="all">
        <div className={style.pageTitle}>所有内容</div>
        <Table rowKey="id" columns={columns} dataSource={list} />
      </Wrapper>
    );
  }
}
